<!--
  Generated template for the DeviceDetailPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

    <ion-navbar>
        <ion-title>设备详细信息</ion-title>
        <ion-buttons end>
            <button ion-button (click)="ionViewDidLoad()" >
                刷新
            </button>
          </ion-buttons>
    </ion-navbar>

    <ion-segment [(ngModel)]="type" (ionChange)="segmentChanged($event)">
        <ion-segment-button value="0" style="height:50px;line-height:50px;">
            基本
        </ion-segment-button>
        <ion-segment-button value="1" style="height:50px;line-height:50px;">
            详细
        </ion-segment-button>
        <ion-segment-button value="2" style="height:50px;line-height:50px;">
            曲线图
        </ion-segment-button>
        <ion-segment-button value="3" style="height:50px;line-height:50px;">
            设备操作
        </ion-segment-button>
    </ion-segment>
</ion-header>

<ion-content>
    <loading-spinner [isReady]="isReady" [isShow]='isLoading' [isError]='isError'></loading-spinner>
    <div class="space-5"></div>
    <div *ngIf="devObj"  [ngSwitch]="type">
        <div *ngSwitchCase="'0'">
            <div class="nf-info-list">
                <ion-grid>
                    <ion-row wrap>
                        <ion-col width-40>
                            <img imageLoader errorPath='assets/imgs/scd.jpg'
                            style="max-width:40%;max-height:125px;margin:0 auto;"
                            [src]="baseUrl+devObj.imagePath" alt="">
                            <!-- <img src="assets/imgs/scd.jpg" width="100%" alt=""> -->
                        </ion-col>
                        <ion-col width-60>
                            <div class="info-item">
                                <p>设备编号</p>
                                <p>{{devObj?.physicalCode | isNullPipe}}</p>
                            </div>
                            <br>
                            <div class="info-item">
                                <p>设备名称</p>
                                <p>{{devObj?.name | isNullPipe}}</p>
                            </div>
                        </ion-col>
                    </ion-row>
                </ion-grid>
                <ion-grid>
                    <ion-row wrap>
                        <ion-col width-100 class="info-item">
                            <p>设备型号</p>
                            <p>{{devObj?.deviceCategoryName | isNullPipe}}</p>
                        </ion-col>
                        <ion-col width-100 class="info-item">
                            <p>固件版本</p>
                            <p>{{devObj?.version | isNullPipe}}</p>
                        </ion-col>
                        <ion-col width-100 class="info-item">
                            <p>所属农场</p>
                            <p>{{devObj?.farmName | isNullPipe}}</p>
                        </ion-col>
                        <ion-col width-50 class="info-item">
                            <p>省市</p>
                            <p>{{devObj?.provinceName | isNullPipe}}{{devObj?.cityName | isNullPipe}}</p>
                        </ion-col>
                        <ion-col width-50 class="info-item">
                            <p>县区</p>
                            <p>{{devObj?.districtName | isNullPipe}}</p>
                        </ion-col>
                        <ion-col width-100 class="info-item">
                            <p>详细地址</p>
                            <p>{{devObj?.address | isNullPipe}}</p>
                        </ion-col>
                        <ion-col width-50 class="info-item">
                            <p>业务员</p>
                            <p>{{devObj?.salesMan | isNullPipe}}</p>
                        </ion-col>
                        <ion-col width-50 class="info-item">
                            <p>业务员手机号</p>
                            <p>{{devObj?.salesPhone | isNullPipe}}</p>
                        </ion-col>
                        <ion-col width-50 class="info-item">
                            <p>维修人</p>
                            <p>{{devObj?.maintenanceMan | isNullPipe}}</p>
                        </ion-col>
                        <ion-col width-50 class="info-item">
                            <p>维修人手机号</p>
                            <p>{{devObj?.maintenancePhone | isNullPipe}}</p>
                        </ion-col>
                        <ion-col width-50 class="info-item">
                            <p>铺设人</p>
                            <p>{{devObj?.buildMan | isNullPipe}}</p>
                        </ion-col>
                        <ion-col width-50 class="info-item">
                            <p>铺设人手机号</p>
                            <p>{{devObj?.buildPhone | isNullPipe}}</p>
                        </ion-col>
                        <ion-col width-50 class="info-item">
                            <p>铺设日期</p>
                            <p>{{devObj?.buildTime | dateFormatPipe:"yyyy-MM-dd" | isNullPipe}}</p>
                        </ion-col>
                        <ion-col width-50 class="info-item">
                            <p>添加日期</p>
                            <p>{{devObj?.createTime | dateFormatPipe:"yyyy-MM-dd hh:mm" | isNullPipe}}</p>
                        </ion-col>
                        <!-- <ion-col width-50 class="info-item">
                      <p>出厂日期</p>
                      <p>2017-09-09</p>
                    </ion-col>
                    <ion-col width-50 class="info-item">
                      <p>投入使用日期</p>
                      <p>2017-09-09</p>
                    </ion-col> -->
                        <ion-col width-50 class="info-item">
                            <p>最后修改日期</p>
                            <p>{{devObj?.updateTime | dateFormatPipe:"yyyy-MM-dd hh:mm" | isNullPipe}}</p>
                        </ion-col>
                        <ion-col width-50 class="info-item">
                            <p>维保到期日期</p>
                            <p>{{devObj?.expireTime | dateFormatPipe:"yyyy-MM-dd" | isNullPipe}}</p>
                        </ion-col>
                        <ion-col width-100 class="info-item">
                            <p>描述</p>
                            <p>{{devObj?.description | isNullPipe}}</p>
                        </ion-col>
                        <ion-col width-50 class="info-item">
                            <p>坐标经度</p>
                            <p>{{devObj?.longitude | isNullPipe}}</p>
                        </ion-col>
                        <ion-col width-50 class="info-item">
                            <p>坐标纬度</p>
                            <p>{{devObj?.latitude | isNullPipe}}</p>
                        </ion-col>
                        <ion-col width-50 class="info-item">
                            <p>设备GSM卡号</p>
                            <p>{{devObj?.logicalCode | isNullPipe}}</p>
                        </ion-col>
                        <ion-col width-50 class="info-item">
                            <p>套餐流量</p>
                            <p>{{devObj?.planFlow | isNullPipe}}M</p>
                        </ion-col>
                        <ion-col width-50 class="info-item">
                            <p>最后操作人</p>
                            <p>{{devObj?.userId | isNullPipe}}</p>
                        </ion-col>
                        <!-- <ion-col width-50 class="info-item">
                      <p>当前登录人员</p>
                      <p>ROOT</p>
                    </ion-col> -->
                    </ion-row>
                </ion-grid>
            </div>
        </div>
        <div *ngSwitchCase="'1'">
            <div class="nf-info-list">
                <ion-grid>
                    <ion-row wrap>
                        <ion-col width-60 text-center>
                            <img src="assets/imgs/simcard.png" height="50" alt="">
                        </ion-col>
                        <ion-col width-40 text-center>
                            <img src="assets/imgs/virus.png" height="50" alt="">
                        </ion-col>
                        <ion-col width-30 class="info-item" text-center>
                            <p>套餐流量</p>
                            <p>{{devObj?.planFlow | isNullPipe}}M</p>
                        </ion-col>
                        <ion-col width-30 class="info-item" text-center>
                            <p>剩余流量</p>
                            <p>{{devObj?.planFlow - devObj?.actualFlow | isNullPipe }}M</p>
                        </ion-col>
                        <ion-col width-40 class="info-item" text-center>
                            <p>虫量</p>
                            <p>{{devObj?.bugRate | isNullPipe}}只</p>
                        </ion-col>

                        <ion-col width-100 class="info-item">
                            <p>运行时间段</p>
                            <p>{{devObj?.runDuration | devPipe: 'runTimeToStr' | isNullPipe}}</p>
                        </ion-col>
                        <ion-col width-50 class="info-item">
                            <p>设备模式</p>
                            <p>{{devObj?.status | devPipe: 'status' | isNullPipe}}</p>
                        </ion-col>
                        <!-- <ion-col width-50 class="info-item">
                            <p>设备运行状态</p>
                            <p>{{devObj?.runFlag | devPipe: 'runFlag' | isNullPipe}}</p>
                        </ion-col> -->
                        <ion-col width-50 class="info-item">
                            <p>风机运行状态</p>
                            <p>{{devObj?.fanFlag | devPipe:'fanFlag' | isNullPipe}}</p>
                        </ion-col>
                        <ion-col width-50 class="info-item">
                            <p>灯运行状态</p>
                            <p>{{devObj?.lampFlag | devPipe:'lampFlag' | isNullPipe}}</p>
                        </ion-col>
                        <!-- <ion-col width-50 class="info-item">
                          <p>GPS数据同步时间</p>
                          <p>09-10 12:00</p>
                        </ion-col> -->
                        <ion-col width-50 class="info-item">
                            <p>信号强度</p>
                            <p>{{devObj?.signalIntensity | isNullPipe}}dB</p>
                        </ion-col>
                        <ion-col width-50 class="info-item">
                            <p>天线标识</p>
                            <p>{{devObj?.aerialFlag | devPipe:'aerialFlag' | isNullPipe}}</p>
                        </ion-col>
                        <ion-col width-50 class="info-item">
                            <p>电压</p>
                            <p>{{devObj?.voltage | isNullPipe}}V</p>
                        </ion-col>
                        <ion-col width-50 class="info-item">
                            <p>空气温度</p>
                            <p>{{devObj?.airTemperature | isNullPipe}}℃</p>
                        </ion-col>
                        <ion-col width-50 class="info-item">
                            <p>空气湿度</p>
                            <p>{{devObj?.airHumidity | isNullPipe}}%</p>
                        </ion-col>
                        <ion-col width-50 class="info-item">
                            <p>光照强度</p>
                            <p>{{devObj?.beam | isNullPipe}}</p>
                        </ion-col>
                        <ion-col width-50 class="info-item">
                            <p>风速</p>
                            <p>--</p>
                            <!-- <p>{{devObj?.windSpeed | isNullPipe}}级</p> -->
                        </ion-col>
                        <ion-col width-50 class="info-item">
                            <p>风向</p>
                            <p>--</p>
                            <!-- <p>{{devObj?.windDirection | devPipe:'windDirection' | isNullPipe}}</p> -->
                        </ion-col>
                        <ion-col width-50 class="info-item">
                            <p>太阳能状态</p>
                            <p>{{devObj?.solarStatus | devPipe:'solarStatus' | isNullPipe}}</p>
                        </ion-col>
                        <ion-col width-100 class="info-item">
                            <p>数据最后同步时间</p>
                            <p>{{devObj?.updateTime | dateFormatPipe:"yyyy-MM-dd hh:mm:ss" | isNullPipe}}</p>
                        </ion-col>
                    </ion-row>
                </ion-grid>
            </div>
        </div>
        <div *ngSwitchCase="'2'">
            <div class="space-5"></div>
            <div class="segment-my-tabs">
                <a class="segment-my-button" [ngClass]="{'active':analysisType == 'week'}" (click)='changeAnalysisType("week")'>周视图</a>
                <a class="segment-my-button" [ngClass]="{'active':analysisType == 'month'}" (click)='changeAnalysisType("month")'>月视图</a>
                <a class="segment-my-button" [ngClass]="{'active':analysisType == 'year'}" (click)='changeAnalysisType("year")'>年视图</a>
            </div>
            <div class="space-5"></div>
            <div padding>
                <div id="ec-line0" style="height:300px;"></div>
                <div id="ec-line1" style="height:300px;"></div>
                <div id="ec-line2" style="height:300px;"></div>
            </div>
        </div>
        <div *ngSwitchCase="'3'">
            <div *ngIf="devObj && devObj.status != 99">
                <ion-list>
                    <ion-item>
                        <ion-label>设备模式</ion-label>
                        <ion-select [(ngModel)]="actionParam.status" okText="确定" cancelText="取消">
                            <ion-option value="1">手动模式</ion-option>
                            <ion-option value="2">时控模式</ion-option>
                            <ion-option value="3">光控模式</ion-option>
                        </ion-select>
                    </ion-item>
                    <ion-item *ngIf="actionParam.status == 1" >
                        <ion-label>风机设备</ion-label>
                        <ion-toggle [(ngModel)]="actionParam.fanFlag" checked="true"></ion-toggle>
                    </ion-item>
                    <ion-item *ngIf="actionParam.status == 1">
                        <ion-label>灯光设备</ion-label>
                        <ion-toggle [(ngModel)]="actionParam.lampFlag" checked="false"></ion-toggle>
                    </ion-item>
                    <ion-item *ngIf="actionParam.status == 2">
                        <ion-label>时间段</ion-label>
                        <ion-select [(ngModel)]="actionParam.checkedTimes" multiple="true" okText="确定" cancelText="取消">
                            <ion-option *ngFor="let item of timeArr" [value]="item.start">{{item.start}} ~ {{item.end}}</ion-option>
                        </ion-select>
                    </ion-item>
                    <ion-item *ngIf="actionParam.status == 3">
                        <ion-label>工作时长(分钟)</ion-label>
                        <ion-input pattern="[0-9]*" text-right placeholder="请输入工作时长" [(ngModel)]="actionParam.runMinutes" type="number"></ion-input>
                    </ion-item>
                    <ion-item *ngIf="actionParam.status == 3">
                        <ion-label>是否开启电压阈值</ion-label>
                        <ion-toggle [(ngModel)]="actionParam.voltageThresholdFlag"></ion-toggle>
                    </ion-item>
                    <ion-item *ngIf="actionParam.voltageThresholdFlag && actionParam.status == 3" >
                        <ion-label>电压阈值(V)</ion-label>
                        <ion-input type="text" text-right placeholder="请输入电压阈值" [(ngModel)]="actionParam.voltageThreshold"></ion-input>
                    </ion-item>
                </ion-list>
                <div padding i-power="device_control">
                    <button color="primary" ion-button block (click)="updateStatus()">设置</button>
                </div>

                <div padding i-power="device_updateGps">
                    <button color="danger" ion-button block (click)="updateGPS()">更新GPS</button>
                </div>
                <div padding>
                    <button color="dark" ion-button block (click)="guideAddress()">导航-百度地图</button>
                </div>

                <div padding i-power="device_update">
                    <button color="primary" ion-button block (click)="pToDeviceUpdate()">设备信息修改</button>
                </div>
            </div>
            <div *ngIf="devObj && devObj.status == 99" style="font-size:14px;color:red;padding:15px;text-align:center;">
                抱歉设备故障，无法设置
            </div>
            <!--
                        {"runFlag":1,"fanFlag":1,"lampFlag":1,"runDuration":[{"start":"01:00","end":"02:00"},{"start":"02:00","end":"03:00"}]}
                    runFlag：设备的开关，0-关，1开
                    fanFlag ：风机开关，0-关，1开
                    lampFlag： 杀虫灯的开关，0-关，1开
                    runDuration：运行时间段，json数组，可以多个时间段，每个时间段有一个开始时间和结束时间
                     -->
        </div>
    </div>
</ion-content>
